                                             <!-- 商品信息展示组件 -->

<!-- 可传递属性 -->
<!-- imgTop:头部图片地址
	imgLeft:左部图片地址
	备注：头部图片和左部图片一次只能选择一个，如果两个都有值，出错自行修改
	shopTitle：标题内容
	shopPsitive：副标题内容
	onlyLogo：接收  领取  点击函数所需要的  id 等唯一标识
	indexs：接收数组中的 index 位置信息
	pvuvName：pvuv埋点传递名称信息 (传递父组件名称) -->

<!-- 需配套的函数 -->
<!-- shoppClick：使用父元素中的函数  (传递位置信息，唯一识别数据，父组件pvuv埋点名称)  例：
  shoppClick(msg) {
      console.log(msg);
    }, -->

<template>
  <div :class="imgTop ? 'shopShowTop' : 'shopShowLeft'" @click="shopClick">
    <!-- 展示图片 -->
    <!-- -------------------------------------------------------------------------------- -->

    <!-- 在头部展示图片 -->
    <div
      class="shopShow-imgTop"
      v-if="imgTop"
      :style="{ backgroundImage: 'url(' + imgTop + ')' }"
    ></div>
    <!-- 在左侧展示图片 -->
    <div
      class="shopShow-imgLeft"
      v-if="imgLeft"
      :style="{ backgroundImage: 'url(' + imgLeft + ')' }"
    ></div>

    <!-- 文字部分 -->
    <!-- -------------------------------------------------------------------------------- -->
    <div
      class="shopShow-text"
      :class="imgTop ? 'shopShow-textTop' : 'shopShow-textLeft'"
    >
      <!-- 标题 -->
      <div class="shopShow-text-title">{{ shopTitle }}</div>

      <!-- 副标题 -->
      <div class="shopShow-text-positive">{{ shopPsitive }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 传递信息部分
    // --------------------------------------------------------------------------------
    // 头部图片地址
    imgTop: {
      type: [String],
      default: "",
    },

    // 左部图片地址
    imgLeft: {
      type: [String],
      default: "",
    },

    // 标题内容
    shopTitle: {
      type: [String],
      default: "",
    },

    // 副标题内容
    shopPsitive: {
      type: [String],
      default: "",
    },

    // 接收  领取  点击函数所需要的  id 等唯一标识
    onlyLogo: {
      type: [String, Number],
      default: "",
    },

    // 接收数组中的 index 位置信息
    indexs: {
      type: [String, Number],
      default: "",
    },

    // pvuv埋点传递名称信息 (传递父组件名称)
    pvuvName: {
      type: [String],
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    //   整个组件的点击函数
    shopClick() {
      // 使用父元素中的函数  (传递位置信息，唯一识别数据，父组件pvuv埋点名称)
      this.$emit("shoppClick", {
        index: this.indexs,
        onlyLogo: this.onlyLogo,
        pvuvName: this.pvuvName,
      });
    },
  },
};
</script>

<style scoped>
/* 样式外围 */
/* ------------------------------------------------------------------------------------- */
/* 存在头部图片时展示的样式 */
.shopShowTop {
  width: 300px;
  height: 400px;
  border: solid 1px;
}

/* 存在左侧图片时展示的样式 */
.shopShowLeft {
  width: 500px;
  height: 200px;
  display: flex;
  border: solid 1px;
}

/* 图片样式 */
/* ------------------------------------------------------------------------------------- */
/* 图片在头部时 */
.shopShow-imgTop {
  width: 100%;
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 图片在左部时 */
.shopShow-imgLeft {
  width: 200px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 文字样式 */
/* ------------------------------------------------------------------------------------- */
/* 储存文字容器 */
/* 因为文字属性可以向下继承，故可以将标题或者副标题的文字属性写在此处     没有写入的在单独写样式 */
.shopShow-text {
  font-size: 15px;
  font-weight: 600;
}
/* 是头部图片展示时 */
.shopShow-textTop {
  width: 100%;
  text-align: center;
}
/* 是左部图片展示时 */
.shopShow-textLeft {
  height: 100%;
  text-align: left;
}

/* 标题 */
.shopShow-text-title {
}
/* 副标题 */
.shopShow-text-positive {
  font-size: 13px;
  font-weight: 400;
}
</style>
